<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript经典进阶：实现拼图游戏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
            margin-top: 80px;
        }

        #canvas {
            display: none;
        }

        #game {
            max-width: 456px;
            margin: 130px auto;
            margin-top: 10px;
        }

        #game>li {
            width: 150px;
            height: 150px;
            float: left;
            list-style: none;
            margin: 1px;
        }

        #game>li img {
            width: 150px;
            height: 150px;
        }

        /*提示信息*/
        .hint {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            background-color: #3C3C3C;
            opacity: .8;
            text-align: center;
            z-index: 999;
            color: white;
        }

        .hint>div {
            font-size: 20px;
            position: absolute;
            top: 20%;
            left: 50%;
            margin-left: -100px;
        }

        .hint p {
            margin: 1px 0;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="150" height="150">cannot support canvas</canvas>


    <ul id="game">
        <li><img src="" alt="" draggable="true"></li>
        <li><img src="" alt="" draggable="true"></li>
        <li><img src="" alt="" draggable="true"></li>
        <li><img src="" alt="" draggable="true"></li>
        <li><img src="" alt="" draggable="true"></li>
        <li><img src="" alt="" draggable="true"></li>
        <li><img src="" alt="" draggable="true"></li>
        <li><img src="" alt="" draggable="true"></li>
        <li><img src="" alt="" draggable="true"></li>
    </ul>
    <div class="hint hide">
        <div>
            <p>恭喜您！顺利通关！</p>
            <p>已击败全国 99% 的人</p>
            <p id="next">点击进入下一关！</p>
        </div>
    </div>
    <script>
        (function() {
            var hideElement = document.getElementsByClassName('hide')[0];
            hideElement.addEventListener('click', function() {
                hideElement.style.display = 'none';
                location.reload();
            },false)
        })();
        //使用面向对象(组合模式)编程
        function Puzzle() { //放私有属性
            this.ctx = canvas.getContext('2d'); //画笔，canvas是一个html中的特定的canvas元素
            this.imgList = document.querySelectorAll('#game img');
            this.imgArr = Array.from(this.imgList); //es6         
        }

        Puzzle.prototype = {
            init: function (url) { //初始化(进行图片的切图并导出)
                var image = new Image(); //创建游离的img元素
                /*
                new Image()和document.createElement('img');
                是一样的，创建了一个游离（未挂在到DOM中）的<img>元素 
                */
                image.src = url; //将要处理的图片地址放入src属性
                image.onload = function () {
                    this.randomImg(); //打乱顺序，再渲染
                    this.renderImg(image);
                    this.dragEvent();
                }.bind(this);

            },
            //进行图片的渲染并导出
            renderImg: function (image) {
                var index = 0;
                for (var i = 0; i < 3; i++) {
                    for (j = 0; j < 3; j++) {
                        //i,j坐标图如下
                        //(0,0)(0,1)(0,2)
                        //(1,0)(1,1)(1,2)
                        //(2,0)(2,1)(2,2)
                        //所以j,i的坐标刚好和上面的9对值相反
                        this.ctx.drawImage(image, 300 * j, 300 * i, 300, 300, 0, 0, 150, 150);

                        this.imgArr[index].src = canvas.toDataURL('image/jpeg');
                        this.imgArr[index].id = index;
                        index++;
                    }
                }
            },
            //图片的随机排序
            randomImg: function () { //imgList是DOM里面的类数组，没有原生js中的sort方法
                this.imgArr.sort(function () {
                    return Math.random() - Math.random();
                })
            },

            //拖拽事件
            dragEvent: function () {
                //事件代理
                var container = document.getElementById('game');

                container.addEventListener('dragover', function (e) {
                    e.preventDefault(); //如果没有调用这个阻止函数，则目标元素在 dragstart 后，元素无法拖动
                }, false);

                container.addEventListener('dragstart', function (e) {
                    var target = e.target;
                    if (target.tagName.toLowerCase() == 'img') {
                        e.dataTransfer.setData('id', target.id);
                    }
                }, false); //false表示--事件冒泡为否

                container.addEventListener('drop', function (e) {

                    var target = e.target; //drop事件触发的是鼠标 拖拽后释放 所指的元素
                    if (target.tagName.toLowerCase() == 'img') {
                        var originObj = document.getElementById(e.dataTransfer.getData('id'));
                        var endObj = target;
                        [originObj.src, endObj.src] = [endObj.src, originObj.src];
                        [originObj.id, endObj.id] = [endObj.id, originObj.id];
                        //两行代码实现数据交换，不要太爽  
                        var newImgArr = document.querySelectorAll('#game img');
                        var idArr = [];
                        for (i = 0; i < 9; i++) {
                            idArr.push(newImgArr[i].id);
                        }
                        console.log(idArr.toString());
                        if (idArr.toString() == [0, 1, 2, 3, 4, 5, 6, 7, 8].toString()) {
                            document.getElementsByClassName('hide')[0].style.display = 'block';
                        }
                    }
                }, false);
            }
        }
        var puzzle = new Puzzle();
        puzzle.init('img/jinxuanya.jpg');
    </script>
</body>

</html>
